<template>
  <div>
    <el-dialog :title="title" :visible.sync="open" width="30%" append-to-body class="abow_dialog" :close-on-click-modal="false">
      <el-tree
        :data="deptOptions"
        show-checkbox
        default-expand-all
        node-key="id"
        ref="deptTree"
        highlight-current
        @check-change="checkChange"
        :check-strictly="nofathersonrelate"
        :props="defaultProps">
      </el-tree>
      <!--@check="checkClick()"
      @node-click="nodeClick()"-->

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancleDialog()">取 消</el-button>
        <el-button type="primary" @click="confirmDialog()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {treeselect} from "@/api/system/dept";

  export default {
    name: "deptSelectDialog",
    components: {},
    props:{
      multiple:{
        type: Boolean,
        required: false,
        default: false
      },
      departId:{
        type: String,
        required: false,
        default: ""
      },
      nofathersonrelate:{
        type: Boolean,
        required: false,
        default: true
      },
    },
    data() {
      return {
        loading: true,
        title: "部门选择",
        open: false,
        // 部门树选项
        deptOptions: [],
        deptArray: [],
        deptId: "",
        defaultProps: {
          children: 'children',
          label: 'label'
        },

      }
    },
    created() {
      this.getTreeselect();
    },
    watch:{
      departId(){
        this.initDepartComponent()
      },
      open: {
        handler() {
          let that = this;
          if (that.departId) {
            that.$nextTick(() => {
              let checkedKeys = that.departId.split(",");
              that.$refs.deptTree.setCheckedKeys(checkedKeys);
            })
          } else {
            that.$refs.deptTree.setCheckedKeys([]);
          }
        }
      }
    },
    methods: {
      initDepartComponent(){
        let that = this;
        let names = "";
        if(!that.deptOptions){
          that.getTreeselect()
        }
        if(that.departId && that.departId != "undefined"){
          let currDepartId = that.departId;
          for(let item of that.deptArray){
            if(currDepartId.indexOf(item.id)>=0){
              names += ","+item.label
            }
          }
          if(names){
            names = names.substring(1)
          }
        }
        that.$emit("confirmSelect", that.departId, names)
      },
      checkChange(data, checked,indeterminate){
        if(checked && !this.multiple){
          this.$refs.deptTree.setCheckedKeys([data.id]);
        }
      },
      cancleDialog(){
        this.open = false;
      },
      confirmDialog(){
        let rows = this.$refs.deptTree.getCheckedNodes();
        let ids = this.$refs.deptTree.getCheckedKeys();
        let selectNames = rows.map(row => row['label']).join(',');
        let selectIds =ids.map(id => id).join(',');
        this.$refs.deptTree.setCheckedKeys([]);
        this.$emit("confirmSelect", selectIds, selectNames);
        this.open = false;
      },
      show() {
        let that = this;
        that.open = true;
      },
      initData(deptOpt, deptArr) {
        let that = this;
        that.deptOptions = deptOpt;
        that.deptArray = deptArr;
        that.initDepartComponent();
      },
      /** 查询部门下拉树结构 */
      getTreeselect() {
        //弹出窗
        let that = this;
        treeselect().then(response => {
          that.deptOptions = response.data;
        });
      },



    },

  }
</script>

<style scoped>

</style>
